<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>HTML5 Video Player</title>
  <title>HTML5 Video Player</title>
    <meta charset="utf-8">
    <meta name="description" content="HTML5 Video Player, a skinnable video player.">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="We are Tadaima, A group of digital interface crafters.">
    <meta name="author" content="Tadaima">
    <meta name="organization" content="Tadaima">
    <meta name="application-name" content="Tadaima at Codepen">
    <meta name="keywords" content="art direction, design, graphic design, simple, easy, ux, ui, ui/ux, interaction, interactive, interactive design, ecommerce, native app development app, iOS, Android, front-end development, creative development, visual coding, CSS3, HTML5"><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<svg class="svg-icon__sprite" xmlns="http://www.w3.org/2000/svg">
  <symbol id="i-maximize" viewbox="0 0 32 32">
    <polyline points="1.9,15.6 3.3,2.9 16,1.5 "></polyline>
    <line x1="3.3" y1="2.9" x2="29.4" y2="29.1"></line>
    <polyline points="30.8,16.4 29.4,29.1 16.7,30.5 "></polyline>
  </symbol>
  <symbol id="i-search" viewbox="0 0 32 32">
    <circle cx="14" cy="14" r="12"></circle>
    <path d="M23 23 L30 30"></path>
  </symbol>
  <symbol id="i-close" viewbox="0 0 32 32">
    <path d="M2 30 L30 2 M30 30 L2 2"></path>
  </symbol>
  <symbol id="i-plus" viewbox="0 0 32 32">
    <path d="M16 2 L16 30 M2 16 L30 16"></path>
  </symbol>
  <symbol id="i-minus" viewbox="0 0 32 32">
    <path d="M2 16 L30 16"></path>
  </symbol>
  <symbol id="i-play" viewbox="0 0 32 32">
    <path d="M10 2 L10 30 24 16 Z"></path>
  </symbol>
  <symbol id="i-pause" viewbox="0 0 32 32">
    <path d="M23 2 L23 30 M9 2 L9 30"></path>
  </symbol>
  <symbol id="i-backwards" viewbox="0 0 32 32">
    <path d="M16 2 L2 16 16 30 16 16 30 30 30 2 16 16 Z"></path>
  </symbol>
  <symbol id="i-forwards" viewbox="0 0 32 32">
    <path d="M16 2 L30 16 16 30 16 16 2 30 2 2 16 16 Z"></path>
  </symbol>
  <symbol id="i-star" viewbox="0 0 32 32">
    <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z"></path>
  </symbol>
  <symbol id="i-checkmark" viewbox="0 0 32 32">
    <path d="M2 20 L12 28 30 4"></path>
  </symbol>
  <symbol id="i-chevron-top" viewbox="0 0 32 32">
    <path d="M30 20 L16 8 2 20"></path>
  </symbol>
  <symbol id="i-chevron-right" viewbox="0 0 32 32">
    <path d="M12 30 L24 16 12 2"></path>
  </symbol>
  <symbol id="i-chevron-bottom" viewbox="0 0 32 32">
    <path d="M30 12 L16 24 2 12"></path>
  </symbol>
  <symbol id="i-chevron-left" viewbox="0 0 32 32">
    <path d="M20 30 L8 16 20 2"></path>
  </symbol>
  <symbol id="i-arrow-top" viewbox="0 0 32 32">
    <path d="M6 10 L16 2 26 10 M16 2 L16 30"></path>
  </symbol>
  <symbol id="i-arrow-right" viewbox="0 0 32 32">
    <path d="M22 6 L30 16 22 26 M30 16 L2 16"></path>
  </symbol>
  <symbol id="i-arrow-bottom" viewbox="0 0 32 32">
    <path d="M6 22 L16 30 26 22 M16 30 L16 2"></path>
  </symbol>
  <symbol id="i-arrow-left" viewbox="0 0 32 32">
    <path d="M10 6 L2 16 10 26 M2 16 L30 16"></path>
  </symbol>
  <symbol id="i-caret-top" viewbox="0 0 32 32">
    <path d="M30 22 L16 6 2 22 Z"></path>
  </symbol>
  <symbol id="i-caret-right" viewbox="0 0 32 32">
    <path d="M10 30 L26 16 10 2 Z"></path>
  </symbol>
  <symbol id="i-caret-bottom" viewbox="0 0 32 32">
    <path d="M30 10 L16 26 2 10 Z"></path>
  </symbol>
  <symbol id="i-caret-left" viewbox="0 0 32 32">
    <path d="M22 30 L6 16 22 2 Z"></path>
  </symbol>
  <symbol id="i-start" viewbox="0 0 32 32">
    <path d="M8 2 L8 16 22 2 22 30 8 16 8 30"></path>
  </symbol>
  <symbol id="i-end" viewbox="0 0 32 32">
    <path d="M24 2 L24 16 10 2 10 30 24 16 24 30"></path>
  </symbol>
  <symbol id="i-eject" viewbox="0 0 32 32">
    <path d="M30 18 L16 5 2 18Z M2 25 L30 25"></path>
  </symbol>
  <symbol id="i-mute" viewbox="0 0 32 32">
    <path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z"></path>
  </symbol>
  <symbol id="i-volume" viewbox="0 0 32 32">
    <path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z M21 2 C21 2 25 6 25 16 25 26 21 30 21 30 M27 4 C27 4 30 8 30 16 30 24 27 28 27 28"></path>
  </symbol>
  <symbol id="i-ban" viewbox="0 0 32 32">
    <circle cx="16" cy="16" r="14"></circle>
    <path d="M6 6 L26 26"></path>
  </symbol>
  <symbol id="i-options" viewbox="0 0 32 32">
    <path d="M28 6 L4 6 M28 16 L4 16 M28 26 L4 26 M24 3 L24 9 M8 13 L8 19 M20 23 L20 29"></path>
  </symbol>
  <symbol id="i-settings" viewbox="0 0 32 32">
    <path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z"></path>
    <circle cx="16" cy="16" r="4"></circle>
  </symbol>
  <symbol id="i-heart" viewbox="0 0 32 32">
    <path d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z"></path>
  </symbol>
  <symbol id="i-clock" viewbox="0 0 32 32">
    <circle cx="16" cy="16" r="14"></circle>
    <path d="M16 8 L16 16 20 20"></path>
  </symbol>
  <symbol id="i-menu" viewbox="0 0 32 32">
    <path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24"></path>
  </symbol>
</svg>
<main class="flexy__item flexy--items-center flexy--justify-center flexy--column">
  <section class="section flexy__item flexy--column flexy--items-center space--big">
    <header class="header accessible-hide">
      <h2>HTML5 Video Player</h2>
    </header>
    <article class="section__article flexy__item flexy--column flexy--items-center">
      <header class="header accessible-hide">
        <h3>A skinnable video player.</h3>
      </header>
      <div class="video flexy__item">
        <video class="video__player" id="video__player" autoplay="autoplay" preload="metadata">
          <source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_2160p_60fps_normal.mp4" type="video/mp4"/>
        </video>
        <div class="video__control flexy__item">
          <div class="video__duration flexy__item flexy--items-center tooltip" id="video__duration" data-tooltip-content="Duration">00:00:00</div>
          <ul class="flexy__item">
            <li class="video__control__button tooltip" id="video__start" data-tooltip-content="Start">
              <svg class="svg-icon stroke--white" fill="none">
                <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#i-start"></use>
              </svg>
            </li>
            <li class="video__control__button tooltip" id="video__play" data-tooltip-content="Play">
              <svg class="svg-icon stroke--white" fill="none">
                <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#i-play"></use>
              </svg>
            </li>
            <li class="video__control__button tooltip" id="video__pause" data-tooltip-content="Pause">
              <svg class="svg-icon stroke--white" fill="none">
                <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#i-pause"></use>
              </svg>
            </li>
            <li class="video__control__button tooltip" id="video__end" data-tooltip-content="End">
              <svg class="svg-icon stroke--white" fill="none">
                <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#i-end"></use>
              </svg>
            </li>
          </ul>
          <div class="video__control__button video__track flexy__child flexy__item flexy--items-center tooltip" data-tooltip-content="Track">
            <input class="video__track__range flexy__child" id="video__track" type="range" step="1" min="0" max="0" value="0"/>
          </div>
          <div class="video__control__button volume flexy__item tooltip" data-tooltip-content="Volume">
            <svg class="svg-icon stroke--white" id="video__sound" fill="none">
              <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#i-volume"></use>
            </svg>
            <div class="video__track__range__sound">
              <input class="video__track__range" id="sound__track" type="range" step="1" min="0" max="10" value="10"/>
            </div>
          </div>
          <div class="video__control__button tooltip" id="video__fullScreen" data-tooltip-content="Maximize">
            <svg class="svg-icon stroke--white" fill="none">
              <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#i-maximize"></use>
            </svg>
          </div>
        </div>
      </div>
    </article>
  </section>
  <header class="header">
    <h1><a href="http://tadaima.studio" title="Go to Tadaima">
        <svg class="logo-tadaima fill--white" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 80 80">
          <title>Tadaima Studio.</title>
          <desc>A group of digital interface crafters.</desc>
          <g>
            <rect class="st5" y="0" width="80" height="80"></rect>
          </g>
          <lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="27.7468" y1="18.248" x2="52.244" y2="42.7452">
            <stop offset="0" style="stop-color:#FF5572"></stop>
            <stop offset="1" style="stop-color:#FF7555"></stop>
          </lineargradient>
          <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10;" points="52,27 25,27 25,23 55,23 55,31                                 40,31 40,54 "></polyline>
          <lineargradient id="SVGID_2_" gradientunits="userSpaceOnUse" x1="23.9948" y1="30.0043" x2="48.4901" y2="54.4996">
            <stop offset="0" style="stop-color:#FF5572"></stop>
            <stop offset="1" style="stop-color:#FF7555"></stop>
          </lineargradient>
          <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;" points="24,31 36,31 36,57 44,57 44,34 "></polyline>
        </svg></a></h1>
  </header>
</main>
<svg class="svg-bg" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <circle id="a" cx="1468" cy="133" r="35"></circle>
    <mask id="h" x="0" y="0" width="70" height="70" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
    </mask>
    <circle id="b" cx="236.5" cy="732.5" r="23.5"></circle>
    <mask id="i" x="0" y="0" width="47" height="47" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use>
    </mask>
    <circle id="c" cx="1120.5" cy="945.5" r="28.5"></circle>
    <mask id="j" x="0" y="0" width="57" height="57" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use>
    </mask>
    <path id="d" d="M1193.375 302.875l44.6 77.25h-89.2z"></path>
    <mask id="k" x="0" y="0" width="89.201" height="77.25" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use>
    </mask>
    <path id="e" d="M1610.8 513.3l34.14 59.128h-68.278z"></path>
    <mask id="l" x="0" y="0" width="68.277" height="59.13" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use>
    </mask>
    <path id="f" d="M51.045 967.864l38.314 66.362H12.73z"></path>
    <mask id="m" x="0" y="0" width="76.629" height="66.362" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use>
    </mask>
    <path id="g" d="M46.045 311.097l26.5 45.897H19.546z"></path>
    <mask id="n" x="0" y="0" width="52.997" height="45.897" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use>
    </mask>
  </defs>
  <g style="mix-blend-mode:overlay" fill="none" fill-rule="evenodd" opacity=".35" stroke="#FFF">
    <use class="svg-bg_element" mask="url(#h)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
    <use class="svg-bg_element" mask="url(#i)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use>
    <use class="svg-bg_element opacity-anim" mask="url(#j)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use>
    <path class="stroke-anim" d="M657.5 848.5l46 46" stroke-width="3" stroke-linecap="square"></path>
    <path d="M1360.5 1206.5l89-89M761.5 42.5l42-42" stroke-width="3" stroke-linecap="square"></path>
    <use class="svg-bg_element" mask="url(#k)" stroke-width="6" transform="rotate(90 1193.375 341.5)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use>
    <use class="svg-bg_element" mask="url(#l)" stroke-width="6" transform="rotate(45 1610.8 542.863)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use>
    <use class="svg-bg_element rotate-anim" mask="url(#m)" stroke-width="6" transform="rotate(45 51.045 1001.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use>
    <use class="svg-bg_element" mask="url(#n)" stroke-width="6" transform="rotate(20 46.045 334.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use>
  </g>
</svg>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>
